import Item from './item'
import { forwardRef } from 'react'

const OneBox = forwardRef((props, ref) => {
  const { Data, addComponent, removeComponent } = props // 拿到父组件传递的列表数据、添加和移出方法
  const handleClick = () => {
    //唯一key,h5原生拖拽需要唯一id
    addComponent({
      // 触发父组件方法添加输入框组件
      id: +new Date()
    })
  }

  return (
    <div className="onebox">
      <span>Prepare to study</span>
      <div>
        {Data?.map(item => (
          <Item
            key={item.id}
            ref={ref}
            DragStart
            removeComponent={removeComponent}
            listInfo={item}
          />
        ))}
        <button onClick={handleClick}>+</button>
      </div>
    </div>
  )
})
export default OneBox
